<script setup lang="ts">
import Aside from "@/views/Index/components/Aside/index.vue";
import Header from "@/views/Index/components/Header/index.vue";
import Footer from "@/views/Index/components/Footer/index.vue";
import {ref} from "vue";

// 用于控制侧边栏是否折叠
const isCollapse = ref<boolean>(false);
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="isCollapse?'auto':'220px'">
                <Aside :isCollapse="isCollapse"/>
            </el-aside>
            <el-container>
                <el-header>
                    <Header v-model:isCollapse="isCollapse"/>
                </el-header>
                <el-main>
                    留给二级路由
                </el-main>
                <el-footer>
                    <Footer/>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>
.common-layout{
    min-width: 800px;
    .el-header,.el-footer{
        height:50px;
        padding:0;
    }
}
</style>